<template>
  <div class="app">
    <header class="header">
      <HeaderPage />
    </header>
    <div class="main-content"><!-- 这里是主内容区  中间内容分为左中右三块 -->
      <aside class="left">
        <LeftPage />
      </aside>
      <aside class="content">
        <h1>你好啊HTML！</h1>
        <Center :isCameraOpen="isCameraOpen" :stream="stream" />
      </aside>
      <aside class="right">
        右侧内容,输出检测报告信息
      </aside>
    </div>
    <bottomPage />
  </div>
</template>

<script lang="ts">
import Person from './components/Person.vue';
import bottomPage from './components/bottomPage.vue';
import HeaderPage from './components/HeaderPage.vue';
import LeftPage from './components/LeftPage.vue';
import Center from './components/Center.vue';
import { ref } from 'vue';
export default {
  name: 'App',
  components: { Person, bottomPage,HeaderPage,LeftPage,Center},
  setup() {
    const isCameraOpen = ref(false);
    const stream = ref<MediaStream | null>(null);
    const toggleCamera = async () => {
      if (isCameraOpen.value) {
        // 关闭摄像头
        if (stream.value) {
          stream.value.getTracks().forEach(track => track.stop());
        }
        stream.value = null;
        isCameraOpen.value = false;
      } else {
        // 打开摄像头
        try {
          stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
          isCameraOpen.value = true;
        } catch (error) {
          console.error('Error accessing camera:', error);
        }
      }
  };
  return {
      isCameraOpen,
      stream,
      toggleCamera,
    };
  }
}
</script>

<style>
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 1px;
}

.main-content {
  display: flex;
  flex: 1;
}

.left {
  width: 20%;
  background-color: #f2f2f2;
  padding: 10px;
}

.content {
  flex: 1;
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.right {
  width: 20%;
  background-color: #f2f2f2;
  padding: 10px;
}
</style>
